<template>
  <el-card shadow="hover">
    <div slot="header">
      <span>商品列表</span>
      <el-button type="primary" size="small" style="float: right" @click="createItem">新建商品</el-button>
    </div>
    <el-table
      :data="shopList"
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        fixed="left">
      </el-table-column>
      <el-table-column
        prop="logo"
        fixed="left"
        align="center"
        label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.imgList" width="50" style="border-radius: 4px">
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        fixed="left"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="cateTitle"
        label="商品类别">
      </el-table-column>
      <el-table-column
        prop="stockNum"
        label="商品库存">
      </el-table-column>
      <el-table-column
        prop="stockNum"
        label="商品余量">
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品价格">
      </el-table-column>
      <el-table-column
        prop="promotionPrice"
        label="推广价格">
      </el-table-column>
      <el-table-column
        prop="goodsStatus"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.goodsStatus == 1" type="warning">下架</el-tag>
          <el-tag v-show="scope.row.goodsStatus == 2" type="success">上架</el-tag>
          <el-tag v-show="scope.row.goodsStatus == 3" type="danger">违规下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="rate"
        label="商品好评率">
        <template slot-scope="scope">
          <el-rate
            :allow-half="true"
            v-model="scope.row.rate"
            disabled>
          </el-rate>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="shelf(scope.row.id)" type="text" size="small">商品上架</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
  import {getAllItems, shelfItem} from "../../api/item";

  export default {
    name: "list",
    data() {
      return {
        shopList:  [],
        currentPage: 1,
        pageSize: 10,
        total: 20,
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        this.getItemList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getItemList({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        });
      },
      async shelf(id) {
        await shelfItem({goodsId: id});
        this.getItemList();
      },
      createItem() {
        this.$router.push('/item/create')
      },
      async getItemList() {
        let res = await getAllItems();
        this.shopList = res.pages.list;
        this.shopList.map(v => {
          v.rate = v.price % 5;
          v.cateTitle = v.goodsCategory.name;
          v.price = v.price / 100;
          v.promotionPrice = v.promotionPrice / 100;
          v.imgList = v.imgList.split(',')[0];
        })
        this.currentPage = res.pages.pageNum;
        this.total = res.pages.total;
      }
    },
    created() {
      this.getItemList();
    }
  }
</script>

<style scoped>

</style>
